<template>
  <div>
    <div v-if="isLoad">
      <van-skeleton title :row="6" />
    </div>
    <div v-else>
      <van-row>
        <van-col :span="22" :offset="1">
          <van-swipe
            class="my-swipe"
            :autoplay="3000"
            indicator-color="white"
            :show-indicators="true"
          >
            <van-swipe-item>
              <img src="../../../public/images/home_03.png" />
            </van-swipe-item>
            <van-swipe-item>
              <img src="../../../public/images/home_03.png" />
            </van-swipe-item>
            <van-swipe-item>
              <img src="../../../public/images/home_03.png" />
            </van-swipe-item>
            <van-swipe-item>
              <img src="../../../public/images/home_03.png" />
            </van-swipe-item>
          </van-swipe>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      isLoad: true,
      bannerlist: [],
      url: "https://img.9lele.com/file.php",
    };
  },
  mounted() {
    setTimeout(
      function () {
        this.isLoad = false;
      }.bind(this),
      500
    );
  },
  computed: {
    ...mapGetters(["banner"]),
  },
  methods: {
    getBanner() {
      this.$store.dispatch("apple/BannerList").then((e) => {
        // console.log(e);
        this.bannerlist = e.data.data;
        console.log(this.bannerlist);
      });
    },
  },
  created() {
    this.getBanner();
  },
};
</script>

<style  scoped="scoped">
img {
  width: 100%;
  height: 100%;
}
</style>